import React, { Component } from 'react';
class xbb extends Component {
  // 构造器
  constructor(props) {
    super(props);
    this.state = { 
      count:0
    }
    console.log('新版本','constructor')
  }


  // 组件挂载完毕 --用于数据请求
  componentDidMount(){
    console.log('新版本','组件挂载完毕')
  }

  //组件将要卸载
  componentWillUnmount(){
    console.log('新版本','组件将要卸载')
  }
  

  // ----------------------start---------------------------
  /* 外边的为挂载   里面的为跟新过程 */ 

  //在子组件内执行-将要接受props时执行 -- 新增 static定义静态类
  static getDerivedStateFromProps(nextProps, prevState){
    // console.log(nextProps,prevState)
    console.log('新版本','在子组件内执行')
    return prevState
  }

  //组件将要跟新 解决重复渲染
  shouldComponentUpdate(nextProps,nextState){
    console.log('新版本','组件将要跟新')
    return true
  }

  //组件跟新时 -- 新增
  getSnapshotBeforeUpdate(prevProps, prevState){
    console.log(prevProps,prevState)
    console.log('新版本','组件跟新时')
    return prevState
  }

  //组件更新之后
  componentDidUpdate(){
    console.log('新版本','组件渲染之后')
  }


  // -----------------------end--------------------------





  //初始化渲染、状态跟新之后
  render() { 
    console.log('新版本','render')
    return ( 
      <div>
        <div>count内容：{this.state.count}</div>
        <button onClick={this.addCount}>求和</button>
      </div>
    );
  }
  addCount = () => {
    this.setState({
      count:this.state.count+1
    })
  }
}
 
export default xbb;